Crafty.c("Ball", {

	init: function(){
		this.requires("2D");
	},

  Circle: function(radius, color) {
      this.radius = radius;
      this.w = this.h = radius * 2;
      this.color = color || "#000000";
      
      return this;
  },
  
  draw: function() {
     var ctx = Crafty.canvas.context;
     ctx.save();
     ctx.fillStyle = this.color;
     ctx.beginPath();
     ctx.arc(
         this.x + this.radius,
         this.y + this.radius,
         this.radius,
         0,
         Math.PI * 2
     );
     ctx.closePath();
     ctx.fill();
  }
});

Crafty.c("Box", {

  init: function(){
    this.requires("2D");
  },

  Box: function(width, heigth, color) {
      this.w = width;
      this.h = heigth;
      this.color = color || "#000000";
      
      return this;
  },
  
  draw: function() {
     var ctx = Crafty.canvas.context;
     ctx.save();
     ctx.fillStyle = this.color;
     ctx.beginPath();
     ctx.rect(this.x, this.y, this.w, this.h);
     ctx.closePath();
     ctx.fill();
  }
});